<template>
	<div>
		<div class="chartInfo">
			<div class="chart itembox">
				<div class="itemboxTitle">今日转运车</div>
				<div class="timeChange">
					<el-radio-group v-model="status" size="default" @change="todayCarListSearch">
						<el-radio-button label="未离场" value="1" />
						<el-radio-button label="已离场" value="0" />
					</el-radio-group>
				</div>
				<div class="unit">
					<el-button type="primary" :icon="Plus" @click="handleAdd('batchAdd')"
						:disabled="isSupervisor">批量转运</el-button>
				</div>
				<div>
					<el-scrollbar>
						<div class="scrollbar-flex-content">
							<div v-for="(item, index) in todayCarList" :key="item" class="scrollbar-demo-item"
								:class="index == 2 ? 'last' : ''">
								<div class="img carListPosi">
									<img class="leave" src="../../../assets/images/lichang.png"
										v-if="item.taskStatus == '5'">
									<img v-if="item.url" :src="item.url">
									<img v-else src="../../../assets/images/carImg.png">
								</div>
								<div class="info">
									<p>所在地：{{item.location ? item.location :depNameTranslate(item.depId)}}</p>
									<!-- <p>所在地：{{depNameTranslate(item.location)}}</p> -->
									<p>车牌号：{{item.licensePlate}}</p>
									<p>入场时间：{{item.createTime}}</p>
								</div>
								<div class="checked" v-if="status == '1'">
									<el-checkbox v-model="item.checked" label="" size="large" />
								</div>
							</div>
						</div>
						<div v-show="todayCarList.length == 0"><el-empty style="padding: 20px 0" :image-size="60"
								description="暂无数据" /></div>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<div class="chartInfo">
			<div class="chart itembox">
				<div class="itemboxTitle">转运记录</div>
				<div class="timeChange">
					<div class="filter">
						<el-radio-group v-model="searchTimeType" size="default" @change="searchTimeChange">
							<el-radio-button label="本周" value="week" />
							<el-radio-button label="本月" value="month" />
							<el-radio-button label="本季度" value="halfYear" />
							<el-radio-button label="本年" value="year" />
							<el-radio-button label="自定义 ▼" value="custom" />
						</el-radio-group>
						<div class="seachFilter flexWarp" v-show="searchTimeType == 'custom'">
							<div class="filter-item">
								<el-select v-model="searchForm.depId" class="m-2" placeholder="所属单位"
									style="width: 120px" :disabled="localTypeUnit != '1'">
									<el-option v-for="item in depIdList" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<div class="filter-item">
								<el-select v-model="searchForm.status" class="m-2" placeholder="状态" style="width: 120px"
									:disabled="localTypeUnit != '1'">
									<el-option v-for="item in statusList" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<div class="filter-item">
								<el-input v-model="searchForm.sludgeBatchNo" placeholder="污泥批次号" style="width: 120px" />
							</div>
							<div class="filter-item">
								<el-input v-model="searchForm.licensePlate" placeholder="车牌号" style="width: 120px" />
							</div>
							<div class="filter-item">
								<el-input v-model="searchForm.transferDestination" placeholder="转运目的地"
									style="width: 120px" />
							</div>
							<!-- <div class="filter-item">
                                <el-date-picker
                                    v-model="searchForm.entranceTime"
                                    type="date"
                                    clearable
                                    placeholder="入场时间"
                                    style="width: 145px"
                                />
                            </div> -->
							<!-- <div class="filter-item">
                                <el-date-picker
                                    v-model="searchForm.receiveTime"
                                    type="date"
                                    clearable
                                    placeholder="接收时间"
                                    style="width: 145px"
                                />
                            </div>
                            <div class="filter-item">
                                <el-date-picker
                                    v-model="searchForm.exitTime"
                                    type="date"
                                    clearable
                                    placeholder="离场时间"
                                    style="width: 145px"
                                />
                            </div> -->
							<div class="filter-item">
								<el-date-picker v-model="searchForm.time" type="daterange" range-separator="至"
									start-placeholder="开始时间" end-placeholder="结束时间" style="width: 245px" />
							</div>

							<div class="filter-item">
								<el-button type="primary" @click="search">查询</el-button>
							</div>
							<div class="filter-item">
								<el-button type="primary" @click="reset">重置</el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="unit">
					<el-button type="primary" :icon="Plus" @click="handleAdd('add')"
						:disabled="isSupervisor">新建转运</el-button>
				</div>

				<el-table :data="tableData" style="width: 100%" highlight-current-row
					:cell-style="{ 'text-align': 'center' }" :header-cell-style="headerCellStyle"
					:row-class-name="tableRowClassName" size="default">
					<el-table-column prop="depId" label="所属单位" min-width="100">
						<template #default="scope">
							{{ depNameTranslate(scope.row.depId) }}
						</template>
					</el-table-column>
					<el-table-column prop="sludgeBatchNo" label="污泥批次号" min-width="130" />
					<el-table-column prop="licensePlate" label="车牌号" min-width="100" />
					<el-table-column prop="status" label="状态" min-width="120">
						<template #default="scope">
							<el-tag
								:type="statusTagType(scope.row.status)">{{ statusNameTranslate(scope.row.status) }}</el-tag>
						</template>
					</el-table-column>

					<el-table-column prop="entranceTime" sortable label="入场时间" min-width="120" />
					<el-table-column prop="transferQuantity" label="转运量（吨）" min-width="110" />
					<el-table-column prop="exitTime" sortable label="离场时间" min-width="120" />
					<el-table-column prop="transferDestination" label="转运目的地" min-width="180" />
					<el-table-column prop="receiveTime" sortable label="接收时间" min-width="120" />
					<el-table-column prop="moistureContent" label="含水率(%)" min-width="110" />
					<el-table-column label="操作" width="160" fixed="right">
						<template #default="scope">
							<el-tooltip class="box-item" effect="dark" content="详情" placement="top-start">
								<el-button type="primary" :icon="View" size="small" style="margin-bottom: 4px;"
									@click="handleDetail(scope.$index, scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="编辑" placement="top-start">
								<el-button type="primary" :icon="Edit" size="small" :disabled="isSupervisor"
									style="margin-left: 4px;margin-bottom: 4px;"
									@click="handleEdit(scope.$index, scope.row)">
								</el-button>
							</el-tooltip>
							<el-popconfirm class="box-item" title="确认空车重量已记录，允许装泥？" placement="top-end" width="180px"
								@confirm="allowloadingMud(scope.$index, scope.row)">
								<template #reference>
									<span>
										<el-tooltip v-if="scope.row.status == '-5'" class="box-item" effect="dark"
											content="允许装泥" placement="top-start">
											<el-button type="primary" :icon="Check" size="small"
												:disabled="isSupervisor" style="margin-left: 4px;;margin-bottom: 4px;">
											</el-button>
										</el-tooltip>
									</span>
								</template>
							</el-popconfirm>
							<el-popconfirm class="box-item" title="已采样，允许离场？" placement="top-end" width="180px"
								@confirm="sampling(scope.$index, scope.row)">
								<template #reference>
									<span>
										<el-tooltip v-if="scope.row.status == '0' || scope.row.status == '5'"
											class="box-item" effect="dark" content="采样" placement="top-start">
											<el-button type="primary" :icon="Aim" size="small"
												style="margin-left: 4px;;margin-bottom: 4px;"
												:disabled="scope.row.status == '0' || isSupervisor">
											</el-button>
										</el-tooltip>
									</span>
								</template>
							</el-popconfirm>
							<el-tooltip
								v-if="scope.row.status == '7' || scope.row.status == '10' || scope.row.status == '90' || scope.row.status == '99' || scope.row.status == '100'"
								class="box-item" effect="dark" content="含水率" placement="top-start">
								<el-button type="primary" size="small" :disabled="isSupervisor"
									style="margin-left: 4px;;margin-bottom: 4px;"
									@click="handleLeave(scope.$index, scope.row)">
									%
								</el-button>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="轨迹" placement="bottom-start">
								<el-button :type="scope.row.status == '90' ? 'warning' : 'primary'" :icon="MapLocation"
									size="small" style="margin-left: 0px;" @click="handleMap(scope.$index, scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="复制" placement="bottom-start">
								<el-button type="primary" :icon="CopyDocument" size="small" :disabled="isSupervisor"
									style="margin-left: 4px;" @click="handleCopy(scope.$index, scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip class="box-item" effect="dark" content="删除" placement="bottom-start">
								<el-button type="danger" :icon="Delete" size="small" :disabled="isSupervisor"
									style="margin-left: 4px;" @click="handleDelete(scope.$index, scope.row)">
								</el-button>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination v-model:current-page="searchForm.pageNo" v-model:page-size="searchForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" class="equipmentPagination" />
			</div>
		</div>
	</div>
	<el-dialog v-model="dialogVisible" :title="dialogTitle" width="1000px" height="80%">
		<el-scrollbar height="460px">
			<div class="dialogContent">
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
					:inline="true" :disabled="dialogType == 'detail'">
					<div class="baseInfo sludgemodel">
						<el-row>
							<el-col :span="8">
								<el-form-item label="污泥批次号" prop="sludgeBatchNo" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.sludgeBatchNo" placeholder="系统自动生成" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="状态" prop="status" class="demo-ruleForm-item" style="width: 100%;">
									<el-select v-model="ruleForm.status" placeholder="请选择">
										<el-option v-for="item in statusList" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="sludgeInfo sludgemodel">
						<div class="modelTitle">污泥信息</div>
						<el-row>
							<el-col :span="8">
								<el-form-item label="所属单位" prop="depId" class="demo-ruleForm-item" style="width: 100%;">
									<el-select v-model="ruleForm.depId" placeholder="请选择">
										<el-option v-for="item in depIdList" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="8">
                                <el-form-item
                                    label="污泥类型"
                                    prop="sludgeType"
                                    class="demo-ruleForm-item"
                                    style="width: 100%;"
                                >
                                    <el-select
                                        v-model="ruleForm.sludgeType"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in sludgeTypeList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="检测报告编号"
                                    prop="inspectionReportNo"
                                    class="demo-ruleForm-item"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="ruleForm.inspectionReportNo"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col> -->
							<el-col :span="8">
								<el-form-item label="含水率" prop="moistureContent" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.moistureContent" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<!-- <el-row>
                            <el-col :span="8">
                                <el-form-item
                                    label="污泥含水率"
                                    prop="moistureContent"
                                    class="demo-ruleForm-item"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="ruleForm.moistureContent"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="重金属含量"
                                    prop="heavyMetalContent"
                                    class="demo-ruleForm-item"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="ruleForm.heavyMetalContent"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label="病原体浓度"
                                    prop="pathogenConcentration"
                                    class="demo-ruleForm-item"
                                    style="width: 100%;"
                                >
                                    <el-input
                                        v-model="ruleForm.pathogenConcentration"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row> -->
					</div>
					<div class="carInfo sludgemodel">
						<div class="modelTitle">
							装车信息
							<!-- <el-button
                                class="addCar"
                                type="primary"
                                :icon="Plus"
                                
                                v-show="dialogType != 'detail'"
                            /> -->
						</div>
						<div class="carItem" v-for="(item, index) in ruleForm.loadingDetailList" :key="index">
							<div class="carItemName">车辆{{ index + 1 }}
								<!-- <el-button
                                    class="deleteCar"
                                    type="danger"
                                    :icon="Delete"
                                    
                                    v-show="dialogType != 'detail'"
                                /> -->
							</div>
							<el-row>
								<el-col :span="8">
									<el-form-item label="车牌号" prop="licensePlate" class="demo-ruleForm-item"
										style="width: 100%;">
										<!-- <WsLicenseNo
                                            :licenseNo="item.licensePlate"
                                            @licenseNoChange="licenseNoChange"
                                        ></WsLicenseNo> -->

										<el-select v-model="item.licensePlate" placeholder="请选择" filterable
											@change="(res) => { return licensePlateChange(res, index) }"
											style="width: 84%;">
											<el-option v-for="item in licenseNoList" :key="item.licensePlate"
												:label="item.licensePlate" :value="item.licensePlate" />
										</el-select>
										<el-popover placement="right-start" title="补充信息" :width="300" trigger="hover">
											<template #reference>
												<el-icon size="20" style="margin-left:10px">
													<InfoFilled />
												</el-icon>
											</template>

											<div class="baseInfo sludgemodel">
												<el-row>
													<el-col :span="24">
														<el-form-item label="动力类型" prop="impetusType"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-select v-model="item.impetusType" placeholder="请选择"
																disabled>
																<el-option v-for="t in impetusTypeList" :key="t.value"
																	:label="t.label" :value="t.value" />
															</el-select>
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="总质量(吨)" prop="emptyWeightOrg"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-input v-model="item.emptyWeightOrg" placeholder="请输入"
																disabled />
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="核定载重(吨)" prop="approvedLoad"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-input v-model="item.approvedLoad" placeholder="请输入"
																disabled />
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="车长(米)" prop="length"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-input v-model="item.length" placeholder="请输入"
																disabled />
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="车宽(米)" prop="width"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-input v-model="item.width" placeholder="请输入" disabled />
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="车高(米)" prop="height"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-input v-model="item.height" placeholder="请输入"
																disabled />
														</el-form-item>
													</el-col>
												</el-row>
												<el-row>
													<el-col :span="24">
														<el-form-item label="轴数" prop="axleNumber"
															class="demo-ruleForm-item" style="width: 100%;">
															<el-select v-model="item.axleNumber" placeholder="请选择"
																disabled>
																<el-option v-for="t in axleNumberList" :key="t.value"
																	:label="t.value" :value="t.value" />
															</el-select>
														</el-form-item>
													</el-col>
												</el-row>
											</div>
										</el-popover>

									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="运输单位" prop="transportDepName" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.transportDepName" placeholder="请输入" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="车辆类型" prop="vehicleType" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-select v-model="item.vehicleType" placeholder="请选择" @change="depIdChange">
											<el-option v-for="item in vehicleTypeList" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8">
									<el-form-item label="驾驶员" prop="driver" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.driver" placeholder="请输入" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="联系方式" prop="phone" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.phone" placeholder="请输入" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="空车重量(吨)" prop="emptyWeight" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.emptyWeight" placeholder="请输入" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8">
									<el-form-item label="总重量(吨)" prop="totalCargoWeight" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="ruleForm.totalCargoWeight" placeholder="请输入" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="转运量(吨)" prop="transferQuantity" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.transferQuantity" placeholder="请输入" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="入场时间" prop="entranceTime" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.entranceTime" placeholder="请输入" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<!-- <el-col :span="8">
                                    <el-form-item
                                        label="装车时间"
                                        prop="loadingTime"
                                        class="demo-ruleForm-item"
                                        style="width: 100%;"
                                    >
                                        <el-date-picker
                                            v-model="item.loadingTime"
                                            type="datetime"
                                            placeholder="请选择"
                                        />
                                    </el-form-item>
                                </el-col> -->
								<el-col :span="8">
									<el-form-item label="离场时间" prop="exitTime" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-date-picker v-model="ruleForm.exitTime" type="datetime" placeholder="请选择" />
									</el-form-item>
								</el-col>
								<el-col :span="16">
									<el-form-item label="异常及处理" prop="loadingException" class="demo-ruleForm-item"
										style="width: 100%;">
										<el-input v-model="item.loadingException" placeholder="请输入" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="5">
									<el-form-item label="现场图片" prop="sceneImageIds" class="demo-ruleForm-item"
										style="width: 100%;">
										<div class="pictureList">
											<div class="pictureItem">
												<div class="pic">
													<el-image style="width:100px;height:100px;"
														:src="item.enterImageIds" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.enterImageIds]"
														show-progress :initial-index="0" fit="cover">
														<template #error>
															<div class="image-slot">
																暂无图片
															</div>
														</template>
													</el-image>
												</div>
												<div class="picName">车辆进场</div>
											</div>
											<div class="pictureItem">
												<div class="pic">
													<el-image style="width:100px;height:100px;"
														:src="item.exitWeighImageIds" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.exitWeighImageIds]"
														show-progress :initial-index="0" fit="cover">
														<template #error>
															<div class="image-slot">
																暂无图片
															</div>
														</template>
													</el-image>
												</div>
												<div class="picName">离场称重</div>
											</div>
											<div class="pictureItem">
												<div class="pic">
													<el-image style="width:100px;height:100px;"
														:src="item.exitTriplicateForm" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.exitTriplicateForm]"
														show-progress :initial-index="0" fit="cover">
														<template #error>
															<div class="image-slot">
																暂无图片
															</div>
														</template>
													</el-image>
												</div>
												<div class="picName">地磅单</div>
											</div>
											<div class="pictureItem">
												<div class="pic">
													<el-image style="width:100px;height:100px;"
														:src="item.samplingImageId" :zoom-rate="1.2" :max-scale="7"
														:min-scale="0.2" :preview-src-list="[item.samplingImageId]"
														show-progress :initial-index="0" fit="cover">
														<template #error>
															<div class="image-slot">
																暂无图片
															</div>
														</template>
													</el-image>
												</div>
												<div class="picName">采样员签名</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24">
									<el-form-item label="其他" prop="sceneImageIds" class="demo-ruleForm-item"
										:class="item.sceneImagesList && item.sceneImagesList.length == '3' || dialogType == 'detail' ? 'hiddenAddPic' : ''"
										style="width: 100%;">
										<el-upload v-model:file-list="item.sceneImagesList" action="#" :http-request="(res) => {
                                                return itemUploadFileList(res, 'sceneImageIds', index);
                                            }" list-type="picture-card" :on-preview="handlePictureCardPreview"
											:disabled="dialogType == 'detail'" :limit="3">
											<el-icon>
												<Plus />
											</el-icon>
										</el-upload>
										<span
											v-if="item.sceneImagesList && item.sceneImagesList.length == 0 && dialogType == 'detail'">暂无照片</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="sludgeInfo sludgemodel">
						<div class="modelTitle">转运信息</div>
						<el-row>
							<el-col :span="8">
								<el-form-item label="转运目的地" prop="transferDestination" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-select v-model="ruleForm.transferDestination" placeholder="请选择"
										@change="transshipmentDestinationChange" clearable>
										<el-option v-for="item in transshipmentDestinationList" :key="item.id"
											:label="item.destinationName" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="详细地址" prop="destinationAddress" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.destinationAddress" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="sludgeInfo sludgemodel">
						<div class="modelTitle">其它信息</div>
						<el-row>
							<el-col :span="8">
								<el-form-item label="装车操作人员" prop="loadingOperator" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.loadingOperator" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="采样人员" prop="supervisor" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.supervisor" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="创建人" prop="created" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.created" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="sludgeInfo sludgemodel">
						<div class="modelTitle">接收信息</div>
						<el-row>
							<el-col :span="8">
								<el-form-item label="符合接收标准" prop="receiveStandard" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-select v-model="ruleForm.receiveStandard" placeholder="请选择">
										<el-option v-for="item in receiveStandardList" :key="item.value"
											:label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="异常情况" prop="receiveException" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiveException" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8">
								<el-form-item label="接收量(吨)" prop="receiveQuantity" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiveQuantity" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="总载重(吨)" prop="totalCargoWeight" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.totalCargoWeight" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="车辆自重(吨)" prop="vehicleSelfWeight" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.vehicleSelfWeight" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8">
								<el-form-item label="接收时间" prop="receiveTime" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-date-picker v-model="ruleForm.receiveTime" type="datetime" placeholder="请选择" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="接收地点" prop="receiveLocation" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiveLocation" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="接收人" prop="receiver" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiver" placeholder="请输入" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="5">
								<el-form-item label="接收图片" prop="sceneImageIds" class="demo-ruleForm-item"
									style="width: 100%;">
									<div class="pictureList">
										<div class="pictureItem">
											<div class="pic">
												<el-image style="width:100px;height:100px;"
													:src="ruleForm.fullLoadImageIdsUrl" :zoom-rate="1.2" :max-scale="7"
													:min-scale="0.2" :preview-src-list="[ruleForm.fullLoadImageIdsUrl]"
													show-progress :initial-index="0" fit="cover">
													<template #error>
														<div class="image-slot">
															暂无图片
														</div>
													</template>
												</el-image>
											</div>
											<div class="picName">满载</div>
										</div>
										<div class="pictureItem">
											<div class="pic">
												<el-image style="width:100px;height:100px;"
													:src="ruleForm.emptyLoadImageIdsUrl" :zoom-rate="1.2" :max-scale="7"
													:min-scale="0.2" :preview-src-list="[ruleForm.emptyLoadImageIdsUrl]"
													show-progress :initial-index="0" fit="cover">
													<template #error>
														<div class="image-slot">
															暂无图片
														</div>
													</template>
												</el-image>
											</div>
											<div class="picName">空载</div>
										</div>
										<div class="pictureItem">
											<div class="pic">
												<el-image style="width:100px;height:100px;"
													:src="ruleForm.unloadImageIdsUrl" :zoom-rate="1.2" :max-scale="7"
													:min-scale="0.2" :preview-src-list="[ruleForm.unloadImageIdsUrl]"
													show-progress :initial-index="0" fit="cover">
													<template #error>
														<div class="image-slot">
															暂无图片
														</div>
													</template>
												</el-image>
											</div>
											<div class="picName">污泥卸料图</div>
										</div>
										<div class="pictureItem">
											<div class="pic">
												<el-image style="width:100px;height:100px;"
													:src="ruleForm.receiveTriplicateFormUrl" :zoom-rate="1.2"
													:max-scale="7" :min-scale="0.2"
													:preview-src-list="[ruleForm.receiveTriplicateFormUrl]"
													show-progress :initial-index="0" fit="cover">
													<template #error>
														<div class="image-slot">
															暂无图片
														</div>
													</template>
												</el-image>
											</div>
											<div class="picName">三联单(接收单位)</div>
										</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="其他" prop="receiveImageIds" class="demo-ruleForm-item"
									:class="receiveImageList.length == '3' || dialogType == 'detail' ? 'hiddenAddPic' : ''"
									style="width: 100%;">
									<el-upload v-model:file-list="receiveImageList" action="#" :http-request="(res) => {
                                        return uploadFileList(res, 'receiveImageIds');
                                    }" list-type="picture-card" :on-success="handleSuccessReceiveImageIds"
										:on-remove="handleRemoveReceiveImageIds" :disabled="dialogType == 'detail'"
										:on-preview="handlePictureCardPreview" :limit="3">
										<el-icon>
											<Plus />
										</el-icon>
									</el-upload>
									<span v-if="receiveImageList.length == 0 && dialogType == 'detail'">暂无照片</span>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="sludgeInfo sludgemodel">
						<div class="modelTitle">定位信息</div>
						<el-row>
							<el-col :span="16">
								<el-form-item label="入场" prop="enterCoordinatePoint" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.enterCoordinatePoint" placeholder="" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="距离偏移(m)" prop="enterOffset" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.enterOffset" placeholder="" disabled />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16">
								<el-form-item label="离场" prop="loadingLocation" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.loadingLocation" placeholder="" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="距离偏移(m)" prop="loadingOffset" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.loadingOffset" placeholder="" disabled />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16">
								<el-form-item label="接收" prop="receiveLocation" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiveLocation" placeholder="" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="距离偏移(m)" prop="receiveOffset" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.receiveOffset" placeholder="" disabled />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16">
								<el-form-item label="异常停留" prop="stayCoordinatePoint" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.stayCoordinatePoint" placeholder="" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="停留时间(分钟)" prop="stayTimes" class="demo-ruleForm-item"
									style="width: 100%;">
									<el-input v-model="ruleForm.stayTimes" placeholder="" disabled />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">{{dialogType == 'detail' ? '关闭' : '取消'}}</el-button>
				<el-button type="primary" @click="confirm" v-show="dialogType != 'detail'">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>

	<el-dialog v-model="dialogImageVisible" width="50%">
		<img class="fullPriview" w-full :src="dialogImageUrl" />
	</el-dialog>
	<el-dialog v-model="dialogLeaveVisible" title="含水率" width="50%">
		<el-form ref="ruleFormRef" :model="ruleFormLeave" :rules="rulesLeave" label-width="120px" class="demo-ruleForm"
			:inline="true">
			<div class="baseInfo sludgemodel">
				<el-row>
					<el-col :span="12">
						<el-form-item label="含水率(%)" prop="licensePlate" class="demo-ruleForm-item"
							style="width: 100%;">
							<el-input type="number" v-model="ruleFormLeave.moistureContent" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="签名区" prop="sludgeBatchNo" class="demo-ruleForm-item" style="width: 100%;">
							<div style="width: 100%;height: 200px;z-index: 10000">
								<VueSignaturePad v-if="dialogLeaveVisible" ref="signaturePad" :options="options"
									style="z-index: 10001" />
								<el-button type="info" plain @click="clearSignature" size="small">清除</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<img :src="base64DataUrl" alt="">
				</el-row>
			</div>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="default" @click="dialogLeaveVisible = false">
					取消
				</el-button>
				<el-button type="primary" @click="leaveConfirm">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="dialogMapVisible" v-if="dialogMapVisible" title="转运轨迹" width="1000">
		<div class="mapInfo">
			<div class="mapInfoItem">出发时间：{{ dialogMapInfo.exitTime }}</div>
			<div class="mapInfoItem"
				v-if="dialogMapInfo.status == '100' || dialogMapInfo.status == '90' || dialogMapInfo.status == '10'">
				到达时间：{{dialogMapInfo.receiveTime}}</div>
			<div class="mapInfoItem" style="min-width: 200px" v-else>到达时间：--</div>
			<div class="mapInfoItem"
				v-if="dialogMapInfo.status == '100' || dialogMapInfo.status == '90' || dialogMapInfo.status == '10'">
				实际路线：{{ dialogMapInfo.travelDistance }}公里，{{ dialogMapInfo.travelTimes }}分钟</div>
			<div class="mapInfoItem" style="min-width: 200px" v-else>实际路线：--</div>
		</div>
		<map-container ref="mapContainerRef" :dialogMapInfo="dialogMapInfo" :logistics="logistics"
			v-if="dialogMapVisible" @closeConfirmMapDriving="closeConfirmMapDriving"></map-container>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="default" @click="dialogMapVisible = false">
					取消
				</el-button>
				<el-button v-if="dialogMapInfo.status == '90'" type="primary" @click="confirmMapDriving">
					确认轨迹并保存
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
	import fileInfoHttp from "@/https/fileInfo.js";
	import transferRecordHttp from "@/https/transferRecord.js";
	import transportDestinationHttp from "@/https/transportDestination.js";
	import vehicleHttp from "@/https/vehicle.js";
	import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
	import request from '@/utils/request.js'
	import axios from 'axios'
	import {
		Aim,
		Check,
		CopyDocument,
		Delete,
		Edit,
		InfoFilled,
		MapLocation,
		Plus,
		View
	} from "@element-plus/icons-vue";
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";
	import moment from 'moment';
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		nextTick,
		onMounted,
		onUnmounted,
		reactive,
		ref
	} from "vue";
	import mapContainer from './amap/mapContainer.vue';
import { set } from "ol/transform";
	const isSupervisor = ref(false)
	const roleNames = ref(Storage.localGet("roleNames"))
	if (roleNames.value.includes('supervisor')) {
		isSupervisor.value = true
	}
	const todayCarList = ref([])
	const status = ref('1')
	const searchTimeType = ref('week')
	const checked1 = ref(false)
	const total = ref(0)
	const searchForm = ref({
		depId: '',
		status: '',
		sludgeBatchNo: '',
		entranceTime: '',
		receiveTime: '',
		exitTime: '',
		loadingLocation: '',
		licensePlate: '',
		transferDestination: '',
		inspectionReportNo: '',
		time: [],
		startTime: moment().startOf('week').format('YYYY-MM-DD'),
		endTime: moment().endOf('week').format('YYYY-MM-DD'),
		pageNo: 1,
		pageSize: 10
	})

	const todayCarListSearch = async () => {
		let params = {
			location: '',
			status: status.value
		}
		const res = await transferRecordHttp.queryVehicle(params)
		console.log(res.data)
		if (res.data.code == 200) {
			res.data.data.forEach(async (item, index) => {
				if (item.imageIds) {
					getTodayCarImage(item, index)
				} else {
					item.url = ''
				}
				item.checked = false
			})
			todayCarList.value = res.data.data
		}
	}
	const getTodayCarImage = async (item, index) => {
		let imgId = item.imageIds && item.imageIds.split(',')[0]
		const {
			data
		} = await fileInfoHttp.fileInfoGetById(imgId)
		todayCarList.value[index].url = data.data.url
	}
	const tableData = ref([])
	const headerCellStyle = () => {
		let style = {
			background: '#f2f3f5',
			// color: '#fff',
			textAlign: 'center'
		}
		return style
	}
	const tableRowClassName = ({
		row,
		rowIndex
	}) => {
		if ((rowIndex + 1) % 2 === 0) {
			// return 'warning-row'
		}
		return ''
	}

	const filterHandler = (
		value,
		row,
		column
	) => {
		const property = column['property']
		return row[property] == value
	}
	const handleSizeChange = (val) => {
		searchForm.pageSize = val;
		search();
	}
	const handleCurrentChange = (val) => {
		searchForm.pageNo = val;
		search();
	}

	const searchTimeChange = async (v) => {
		searchForm.value.depId = ''
		searchForm.value.status = ''
		searchForm.value.sludgeBatchNo = ''
		searchForm.value.entranceTime = ''
		searchForm.value.loadingLocation = ''
		searchForm.value.licensePlate = ''
		searchForm.value.transferDestination = ''
		searchForm.value.inspectionReportNo = ''
		searchForm.value.time = []
		searchForm.value.startTime = ''
		searchForm.value.endTime = ''
		searchForm.value.pageNo = 1
		searchForm.value.pageSize = 10
		let startTime = ''
		let endTime = ''
		if (v == 'week') {
			startTime = moment().startOf('week').format('YYYY-MM-DD');
			endTime = moment().endOf('week').format('YYYY-MM-DD');
		} else if (v == 'month') {
			startTime = moment().startOf('month').format('YYYY-MM-DD');
			endTime = moment().endOf('month').format('YYYY-MM-DD');
		} else if (v == 'halfYear') {
			startTime = moment().startOf('quarters').format('YYYY-MM-DD');
			endTime = moment().endOf('quarters').format('YYYY-MM-DD');
		} else if (v == 'year') {
			startTime = moment().startOf('year').format('YYYY-MM-DD');
			endTime = moment().endOf('year').format('YYYY-MM-DD');
		}
		searchForm.value.startTime = startTime
		searchForm.value.endTime = endTime
		search()
	}
	const search = async () => {
		if (searchForm.value.time.length == 2) {
			searchForm.value.startTime = moment(searchForm.value.time[0]).format('YYYY-MM-DD')
			searchForm.value.endTime = moment(searchForm.value.time[1]).format('YYYY-MM-DD')
		}
		searchForm.value.entranceTime = searchForm.value.entranceTime ? moment(searchForm.value.entranceTime)
			.format('YYYY-MM-DD') : ''
		// searchForm.value.receiveTime = searchForm.value.receiveTime ? moment(searchForm.value.receiveTime).format('YYYY-MM-DD') : ''
		// searchForm.value.exitTime = searchForm.value.exitTime ? moment(searchForm.value.exitTime).format('YYYY-MM-DD') : ''
		const res = await transferRecordHttp.pageList(searchForm.value)
		console.log(res.data)
		if (res.data.code == 200) {
			tableData.value = res.data.data.records
			total.value = res.data.data.total
		}
	}
	const reset = () => {
		searchForm.value.depId = ''
		searchForm.value.status = ''
		searchForm.value.sludgeBatchNo = ''
		searchForm.value.entranceTime = ''
		searchForm.value.loadingLocation = ''
		searchForm.value.licensePlate = ''
		searchForm.value.transferDestination = ''
		searchForm.value.inspectionReportNo = ''
		searchForm.value.time = []
		searchForm.value.startTime = ''
		searchForm.value.endTime = ''
		searchForm.value.pageNo = 1
		searchForm.value.pageSize = 10
		search()
	}
	const localTypeUnit = ref(Storage.localGet("depId"));
	searchForm.depId = localTypeUnit.value + "";
	const depIdList = ref([{
			label: "公司",
			value: "1"
		},
		{
			label: "星沙厂",
			value: "2"
		},
		{
			label: "城西厂",
			value: "3"
		},
		{
			label: "城北厂",
			value: "4"
		},
		{
			label: "城南厂",
			value: "5"
		},
		{
			label: "城东厂",
			value: "6"
		},
	]);
	const depNameTranslate = (depId) => {
		let depName = "";
		depIdList.value.forEach((item) => {
			if (item.value == depId + '') {
				depName = item.label;
			}
		});
		return depName;
	};
	const statusList = ref([{
			label: "已入场",
			value: "-5"
		},
		{
			label: "装车中",
			value: "0"
		},
		{
			label: "装泥完成",
			value: "5"
		},
		{
			label: "运输中",
			value: "10"
		},
		{
			label: "待离场",
			value: "7"
		},
		{
			label: "异常",
			value: "99"
		},
		{
			label: "已接收",
			value: "90"
		},
		{
			label: "轨迹已确认",
			value: "100"
		},
	]);
	const loadingEquipmentList = ref([{
			label: "污泥泵",
			value: "污泥泵"
		},
		{
			label: "输送带",
			value: "输送带"
		},
		{
			label: "装载机",
			value: "装载机"
		},
	]);
	const statusNameTranslate = (status) => {
		let statusName = "";
		statusList.value.forEach((item) => {
			if (item.value == status) {
				statusName = item.label;
			}
		});
		return statusName;
	};
	const statusTagType = (status) => {
		let statusType = "info";
		if (status == '0') {
			statusType = 'primary'
		} else if (status == '5') {
			statusType = 'warning'
		} else if (status == '10') {
			statusType = 'info'
		} else if (status == '-5') {
			statusType = 'primary'
		} else if (status == '99') {
			statusType = 'danger'
		} else if (status == '100') {
			statusType = 'success'
		}
		return statusType;
	};
	const vehicleTypeList = ref([{
			label: "微型货车",
			value: "微型货车"
		},
		{
			label: "轻型货车",
			value: "轻型货车"
		},
		{
			label: "中型货车",
			value: "中型货车"
		},
		{
			label: "重型货车",
			value: "重型货车"
		},
	]);
	const sludgeTypeList = ref([{
			label: "初沉污泥",
			value: "初沉污泥"
		},
		{
			label: "剩余污泥",
			value: "剩余污泥"
		},
		{
			label: "混合污泥",
			value: "混合污泥"
		},
		{
			label: "其他",
			value: "其他"
		},
	]);
	const receiveStandardList = ref([{
			label: "是",
			value: "0"
		},
		{
			label: "否",
			value: "1"
		},
	]);
	const transshipmentDestinationList = ref([])
	const getTransshipmentDestination = async () => {
		const res = await transportDestinationHttp.pageList({})
		if (res.data.code == 200) {
			res.data.data.records.forEach(item => {
				item.id = item.id + ''
			})
			transshipmentDestinationList.value = res.data.data.records
		}
	}
	const transshipmentDestinationChange = (v) => {
		ruleForm.value.destinationAddress = ''
		transshipmentDestinationList.value.forEach(item => {
			if (v == item.id) {
				ruleForm.value.destinationAddress = item.address
			}
		})
	}
	let ruleForm = ref({
		sludgeBatchNo: '',
		status: '-5',
		// 污泥信息
		depId: '',
		sludgeType: '',
		inspectionReportNo: '',
		moistureContent: '',
		heavyMetalContent: '',
		pathogenConcentration: '',
		sludgePlant: '',
		licensePlate: '',
		// 装车信息
		loadingDetailList: [{
			licensePlate: '',
			transportDepName: '',
			vehicleType: '',
			driver: '',
			phone: '',
			emptyWeight: '',
			transferQuantity: '',
			loadingEquipment: '',
			loadingLocation: '',
			entranceTime: '',
			loadingTime: moment().format('YYYY-MM-DD HH:mm'),
			loadingException: '',
			sceneImageIds: '',
			sceneImagesList: [],
			impetusType: '',
			emptyWeightOrg: '',
			approvedLoad: '',
			length: '',
			width: '',
			height: '',
			axleNumber: '',
			enterImageIds: '',
			exitWeighImageIds: '',
			exitTriplicateForm: '',
			samplingImageId: '',
			enterWeighImageIds: '',
			exitImageIds: '',
			exitWeighImageIds: '',
			exitSignImageIds: '',
		}],
		// 转运信息
		transferDestination: '',
		destinationAddress: '',
		// 其他信息
		loadingOperator: '',
		supervisor: '',
		created: ref(Storage.localGet("realName")),
		sceneImageIds: '',
		// 接受信息
		receiveStandard: '0',
		receiveException: '',
		receiveQuantity: '',
		totalCargoWeight: '',
		vehicleSelfWeight: '',
		receiveTime: '',
		receiveLocation: '',
		receiver: '',
		stayCoordinatePoint: '',
		stayTimes: '',
		receiveImageIds: '',
		vehicleHeadImageIds: '',
		vehicleTailImageIds: '',
		unloadImageIds: '',
		receiveSignImageIds: '',
		fullLoadImageIds: '',
		emptyLoadImageIds: '',
		unloadImageIds: '',
		receiveTriplicateForm: '',
		fullLoadImageIdsUrl: '',
		emptyLoadImageIdsUrl: '',
		unloadImageIdsUrl: '',
		receiveTriplicateFormUrl: '',
		enterCoordinatePoint: '',
		enterCoordinatePoint: '',
		enterOffset: '',
		loadingLocation: '',
		entranceTime: '',
		loadingOffset: '',
		receiveOffset: '',
	})
	let defaultRuleForm = ref({
		sludgeBatchNo: '',
		status: '-5',
		// 污泥信息
		depId: '',
		sludgeType: '',
		inspectionReportNo: '',
		moistureContent: '',
		heavyMetalContent: '',
		pathogenConcentration: '',
		sludgePlant: '',
		licensePlate: '',
		// 装车信息
		loadingDetailList: [{
			licensePlate: '',
			transportDepName: '',
			vehicleType: '',
			driver: '',
			phone: '',
			emptyWeight: '',
			transferQuantity: '',
			loadingEquipment: '',
			entranceTime: '',
			loadingLocation: '',
			loadingTime: moment().format('YYYY-MM-DD HH:mm'),
			loadingException: '',
			sceneImageIds: '',
			sceneImagesList: [],
			impetusType: '',
			emptyWeightOrg: '',
			approvedLoad: '',
			length: '',
			width: '',
			height: '',
			axleNumber: '',
			enterImageIds: '',
			enterWeighImageIds: '',
			exitImageIds: '',
			exitWeighImageIds: '',
			exitSignImageIds: '',
		}],
		// 转运信息
		transferDestination: '',
		destinationAddress: '',
		// 其他信息
		loadingOperator: '',
		supervisor: '',
		created: ref(Storage.localGet("realName")),
		sceneImageIds: '',
		// 接受信息
		receiveStandard: '0',
		receiveException: '',
		receiveQuantity: '',
		totalCargoWeight: '',
		vehicleSelfWeight: '',
		receiveTime: '',
		receiveLocation: '',
		receiver: '',
		stayCoordinatePoint: '',
		stayTimes: '',
		receiveImageIds: '',
		vehicleHeadImageIds: '',
		vehicleTailImageIds: '',
		unloadImageIds: '',
		receiveSignImageIds: '',
		fullLoadImageIds: '',
		emptyLoadImageIds: '',
		unloadImageIds: '',
		receiveTriplicateForm: '',
		fullLoadImageIdsUrl: '',
		emptyLoadImageIdsUrl: '',
		unloadImageIdsUrl: '',
		receiveTriplicateFormUrl: '',
		enterCoordinatePoint: '',
		enterOffset: '',
		loadingLocation: '',
		entranceTime: '',
		loadingOffset: '',
		receiveOffset: '',
	})
	const impetusTypeList = ref([{
			label: "汽油",
			value: "汽油"
		},
		{
			label: "柴油",
			value: "柴油"
		},
		{
			label: "油电混动",
			value: "油电混动"
		},
		{
			label: "纯电动",
			value: "纯电动"
		},
		{
			label: "插混/增程",
			value: "插混/增程"
		},
	]);
	const axleNumberList = ref([{
			label: "2轴",
			value: "2轴"
		},
		{
			label: "3轴",
			value: "3轴"
		},
		{
			label: "4轴",
			value: "4轴"
		},
		{
			label: "5轴",
			value: "5轴"
		},
		{
			label: "6轴",
			value: "6轴"
		},
		{
			label: "6轴及以上",
			value: "6轴及以上"
		},
	]);
	const rules = reactive({
		depId: [{
			required: true,
			message: "请输入",
			trigger: "blur"
		}],
		licensePlate: [{
			required: true,
			message: "请输入",
			trigger: "blur"
		}],
	});

	//车牌号码list
	const licenseNoList = ref([])
	const searchlicenseNoList = async () => {
		const res = await vehicleHttp.pageList({})
		console.log(res.data)
		if (res.data.code == 200) {
			licenseNoList.value = res.data.data.records
		}
	}
	const licensePlateChange = async (params, index) => {
		console.log(params, index, 'params')
		licenseNoList.value.forEach(item => {
			if (item.licensePlate == params) {
				ruleForm.value.licensePlate = item.licensePlate
				ruleForm.value.loadingDetailList[index].licensePlate = item.licensePlate
				ruleForm.value.loadingDetailList[index].transportDepName = item.transportDepName
				ruleForm.value.loadingDetailList[index].vehicleType = item.vehicleType
				ruleForm.value.loadingDetailList[index].impetusType = item.impetusType
				ruleForm.value.loadingDetailList[index].emptyWeightOrg = item.emptyWeight
				ruleForm.value.loadingDetailList[index].approvedLoad = item.approvedLoad
				ruleForm.value.loadingDetailList[index].length = item.length
				ruleForm.value.loadingDetailList[index].width = item.width
				ruleForm.value.loadingDetailList[index].height = item.height
				ruleForm.value.loadingDetailList[index].axleNumber = item.axleNumber
			}
		})
	}
	const dialogVisible = ref(false)
	const dialogType = ref('')
	const dialogTitle = ref('')
	const handleAdd = (type) => {
		if (type == 'add') {
			dialogVisible.value = true
			dialogType.value = 'add'
			dialogTitle.value = '新增'
			ruleForm.value = {
				...defaultRuleForm.value
			}
			sceneImagesList.value = []
			receiveImageList.value = []
			ruleForm.value.loadingDetailList[0].licensePlate = ''
			ruleForm.value.loadingDetailList[0].transportDepName = ''
			ruleForm.value.loadingDetailList[0].vehicleType = ''
			ruleForm.value.loadingDetailList[0].driver = ''
			ruleForm.value.loadingDetailList[0].phone = ''
			ruleForm.value.loadingDetailList[0].emptyWeight = ''
			ruleForm.value.loadingDetailList[0].transferQuantity = ''
			ruleForm.value.loadingDetailList[0].loadingEquipment = ''
			ruleForm.value.loadingDetailList[0].loadingLocation = ''
			ruleForm.value.loadingDetailList[0].entranceTime = ''
			ruleForm.value.loadingDetailList[0].loadingTime = moment().format('YYYY-MM-DD HH:mm')
			ruleForm.value.loadingDetailList[0].loadingException = ''
			ruleForm.value.loadingDetailList[0].impetusType = ''
			ruleForm.value.loadingDetailList[0].emptyWeightOrg = ''
			ruleForm.value.loadingDetailList[0].approvedLoad = ''
			ruleForm.value.loadingDetailList[0].length = ''
			ruleForm.value.loadingDetailList[0].width = ''
			ruleForm.value.loadingDetailList[0].height = ''
			ruleForm.value.loadingDetailList[0].axleNumber = ''
			ruleForm.value.loadingDetailList[0].enterImageIds = ''
			ruleForm.value.loadingDetailList[0].exitWeighImageIds = ''
			ruleForm.value.loadingDetailList[0].exitTriplicateForm = ''
			ruleForm.value.loadingDetailList[0].samplingImageId = ''
			ruleForm.value.loadingDetailList[0].enterWeighImageIds = ''
			ruleForm.value.loadingDetailList[0].exitImageIds = ''
			ruleForm.value.loadingDetailList[0].exitWeighImageIds = ''
			ruleForm.value.loadingDetailList[0].exitSignImageIds = ''
		} else if (type == 'batchAdd') {
			let canBatchAdd = false
			let depIds = []
			todayCarList.value.forEach(item => {
				if (item.checked) {
					canBatchAdd = true
					depIds.push(item.depId)
				}
			})
			if (!canBatchAdd) {
				ElMessage({
					type: 'warning',
					message: '请勾选转运车！'
				})
				return
			}
			let sameDepId = [...new Set(depIds)].length == 1
			if (!sameDepId) {
				ElMessage({
					type: 'warning',
					message: '请选择同一所在地点的车辆'
				})
				return
			}
			dialogVisible.value = true
			dialogType.value = 'add'
			dialogTitle.value = '批量新增'
			ruleForm.value = {
				...defaultRuleForm.value
			}
			sceneImagesList.value = []
			receiveImageList.value = []
			ruleForm.value.loadingDetailList = []
			todayCarList.value.forEach(item => {
				if (item.checked) {
					let loadingDetailListItem = {
						licensePlate: item.licensePlate,
						transportDepName: item.transportDepName,
						vehicleType: item.vehicleType,
						driver: '',
						phone: '',
						emptyWeight: item.weight,
						transferQuantity: '',
						loadingEquipment: '',
						entranceTime: '',
						loadingLocation: '',
						loadingTime: moment().format('YYYY-MM-DD HH:mm'),
						loadingException: '',
						sceneImageIds: item.imageIds,
						sceneImagesList: [],
						impetusType: '',
						emptyWeightOrg: '',
						approvedLoad: '',
						length: '',
						width: '',
						height: '',
						axleNumber: '',
						enterImageIds: '',
						exitWeighImageIds: '',
						exitTriplicateForm: '',
						samplingImageId: '',
						enterWeighImageIds: '',
						exitImageIds: '',
						exitWeighImageIds: '',
						exitSignImageIds: '',
					}
					ruleForm.value.loadingDetailList.push(loadingDetailListItem)
				}
			})
			ruleForm.value.loadingDetailList.forEach((item, index) => {
				if (item.sceneImageIds) {
					getruleFormCarItemImage(item.sceneImageIds, index)
				}
				if (item.licensePlate) {
					const info = getLicenseNoInfo(item.licensePlate)
					item.impetusType = info.impetusType,
						item.emptyWeightOrg = info.emptyWeight,
						item.approvedLoad = info.approvedLoad,
						item.length = info.length,
						item.width = info.width,
						item.height = info.height,
						item.axleNumber = info.axleNumber
				}
			})
		}
	}

	const getruleFormCarItemImage = async (imageIds, index) => {
		let imgId = imageIds && imageIds.split(',')[0]
		const {
			data
		} = await fileInfoHttp.fileInfoGetById(imgId)
		console.log(ruleForm.value.loadingDetailList[index], 'ruleForm.value.loadingDetailList[index]')
		ruleForm.value.loadingDetailList[index].sceneImagesList.push(data.data)
		console.log(ruleForm.value.loadingDetailList, 'ruleForm.value.loadingDetailList')
	}
	const handleDetail = (index, row) => {
		dialogVisible.value = true
		dialogType.value = 'detail'
		dialogTitle.value = '详情'
		getRecordByIdInfo(row.id)

	}
	const handleEdit = (index, row) => {
		dialogVisible.value = true
		dialogType.value = 'edit'
		dialogTitle.value = '编辑'
		getRecordByIdInfo(row.id)
	}
	const getRecordByIdInfo = async (id) => {
		const res = await transferRecordHttp.getRecordById(id)
		res.data.data.status = res.data.data.status + ''
		res.data.data.depId = res.data.data.depId + ''
		ruleForm.value = {
			...defaultRuleForm.value,
			...res.data.data
		}
		if (dialogType.value == 'copy') {
			ruleForm.value.sludgeBatchNo = ''
		}
		ruleForm.value.loadingDetailList = [{
			licensePlate: '',
			transportDepName: '',
			vehicleType: '',
			driver: '',
			emptyWeight: '',
			phone: '',
			transferQuantity: '',
			loadingEquipment: '',
			entranceTime: '',
			loadingLocation: '',
			loadingTime: '',
			loadingException: '',
			sceneImageIds: '',
			sceneImagesList: [],
			impetusType: '',
			emptyWeightOrg: '',
			approvedLoad: '',
			length: '',
			width: '',
			height: '',
			axleNumber: '',
			enterImageIds: '',
			enterWeighImageIds: '',
			exitWeighImageIds: '',
			samplingImageId: '',
			exitTriplicateForm: '',
			exitImageIds: '',
			exitWeighImageIds: '',
			exitSignImageIds: '',
		}]
		ruleForm.value.loadingDetailList[0].licensePlate = res.data.data.licensePlate
		ruleForm.value.loadingDetailList[0].transportDepName = res.data.data.transportDepName
		ruleForm.value.loadingDetailList[0].vehicleType = res.data.data.vehicleType
		ruleForm.value.loadingDetailList[0].emptyWeight = res.data.data.emptyWeight
		ruleForm.value.loadingDetailList[0].driver = res.data.data.driver
		ruleForm.value.loadingDetailList[0].phone = res.data.data.phone
		ruleForm.value.loadingDetailList[0].transferQuantity = res.data.data.transferQuantity
		ruleForm.value.loadingDetailList[0].loadingEquipment = res.data.data.loadingEquipment
		ruleForm.value.loadingDetailList[0].entranceTime = res.data.data.entranceTime
		ruleForm.value.loadingDetailList[0].loadingLocation = res.data.data.loadingLocation
		ruleForm.value.loadingDetailList[0].loadingTime = moment(res.data.data.loadingTime).format(
			'YYYY-MM-DD HH:mm')
		ruleForm.value.loadingDetailList[0].loadingException = res.data.data.loadingException
		ruleForm.value.loadingDetailList[0].sceneImageIds = res.data.data.sceneImageIds
		ruleForm.value.loadingDetailList[0].enterImageIds = res.data.data.enterImageIds
		ruleForm.value.loadingDetailList[0].exitWeighImageIds = res.data.data.exitWeighImageIds
		ruleForm.value.loadingDetailList[0].exitTriplicateForm = res.data.data.exitTriplicateForm
		ruleForm.value.loadingDetailList[0].samplingImageId = res.data.data.samplingImageId
		ruleForm.value.loadingDetailList[0].enterWeighImageIds = res.data.data.enterWeighImageIds
		ruleForm.value.loadingDetailList[0].exitImageIds = res.data.data.exitImageIds
		ruleForm.value.loadingDetailList[0].exitWeighImageIds = res.data.data.exitWeighImageIds
		ruleForm.value.loadingDetailList[0].exitSignImageIds = res.data.data.exitSignImageIds
		ruleForm.value.loadingDetailList[0].enterWeighImageIds = res.data.data.enterWeighImageIds
		ruleForm.value.fullLoadImageIds = res.data.data.fullLoadImageIds || ''
		ruleForm.value.emptyLoadImageIds = res.data.data.emptyLoadImageIds || ''
		ruleForm.value.unloadImageIds = res.data.data.unloadImageIds || ''
		ruleForm.value.receiveTriplicateForm = res.data.data.receiveTriplicateForm || ''
		ruleForm.value.fullLoadImageIdsUrl = ''
		ruleForm.value.emptyLoadImageIdsUrl = ''
		ruleForm.value.unloadImageIdsUrl = ''
		ruleForm.value.receiveTriplicateFormUrl = ''
		console.log(ruleForm.value, 'ruleForm.value')
		if (ruleForm.value.loadingDetailList[0].sceneImageIds) {
			let imageIdsList = ruleForm.value.loadingDetailList[0].sceneImageIds.split(',')
			console.log(imageIdsList, '////imageIdsList')
			imageIdsList.forEach((item, index) => {
				getruleFormCarItemImage(item, 0)
			})
		}
		if (ruleForm.value.receiveImageIds) {
			getFileInfoById(ruleForm.value.receiveImageIds, 'receiveImageIds')
		} else {
			receiveImageList.value = []
		}
		if (ruleForm.value.loadingDetailList[0].licensePlate) {
			const info = getLicenseNoInfo(ruleForm.value.loadingDetailList[0].licensePlate)
			ruleForm.value.loadingDetailList[0].impetusType = info.impetusType,
				ruleForm.value.loadingDetailList[0].emptyWeightOrg = info.emptyWeight,
				ruleForm.value.loadingDetailList[0].approvedLoad = info.approvedLoad,
				ruleForm.value.loadingDetailList[0].length = info.length,
				ruleForm.value.loadingDetailList[0].width = info.width,
				ruleForm.value.loadingDetailList[0].height = info.height,
				ruleForm.value.loadingDetailList[0].axleNumber = info.axleNumber
		}
		console.log(ruleForm.value, '11111111')
		if (ruleForm.value.loadingDetailList[0].enterImageIds) {
			getFileInfoById(ruleForm.value.loadingDetailList[0].enterImageIds, 'enterImageIds')
		}
		if (ruleForm.value.loadingDetailList[0].exitWeighImageIds) {
			getFileInfoById(ruleForm.value.loadingDetailList[0].exitWeighImageIds, 'exitWeighImageIds')
		}
		if (ruleForm.value.loadingDetailList[0].exitTriplicateForm) {
			getFileInfoById(ruleForm.value.loadingDetailList[0].exitTriplicateForm, 'exitTriplicateForm')
		}
		if (ruleForm.value.loadingDetailList[0].samplingImageId) {
			getFileInfoById(ruleForm.value.loadingDetailList[0].samplingImageId, 'samplingImageId')
		}
		if (ruleForm.value.fullLoadImageIds) {
			getFileInfoById(ruleForm.value.fullLoadImageIds, 'fullLoadImageIds')
		}
		if (ruleForm.value.emptyLoadImageIds) {
			getFileInfoById(ruleForm.value.emptyLoadImageIds, 'emptyLoadImageIds')
		}
		if (ruleForm.value.unloadImageIds) {
			getFileInfoById(ruleForm.value.unloadImageIds, 'unloadImageIds')
		}
		if (ruleForm.value.receiveTriplicateForm) {
			getFileInfoById(ruleForm.value.receiveTriplicateForm, 'receiveTriplicateForm')
		}
	}


	const getLicenseNoInfo = (licenseNo) => {
		let licenseNoInfo = {}
		licenseNoList.value.forEach(item => {
			if (licenseNo == item.licensePlate) {
				licenseNoInfo = item
			}
		})
		return licenseNoInfo
	}
	const handleCopy = (index, row) => {
		dialogVisible.value = true
		dialogType.value = 'copy'
		dialogTitle.value = '新增'
		row.status = row.status + ''
		row.depId = row.depId + ''
		getRecordByIdInfo(row.id)
	}
	const handleDelete = (index, row) => {
		ElMessageBox.confirm("确认删除该数据吗？", "删除", {
				confirmButtonText: "确认",
				cancelButtonText: "取消",
				type: "warning",
			})
			.then(async () => {
				const {
					data
				} = await transferRecordHttp.deleteRecord(row.id)
				if (data.code == 200) {
					ElMessage({
						message: "删除成功",
						type: "success",
					});
					search()
				}
			})
	}
	const confirm = async () => {
		if (ruleForm.value.loadingTime) {
			ruleForm.value.loadingTime = moment(ruleForm.value.loadingTime).format('YYYY-MM-DD HH:mm')
		}
		if (ruleForm.value.receiveTime) {
			ruleForm.value.receiveTime = moment(ruleForm.value.receiveTime).format('YYYY-MM-DD HH:mm')
		}
		if (dialogType.value == 'add' || dialogType.value == 'copy') {
			ruleForm.value.loadingDetailList.forEach(item => {
				let ids = []
				if (item.sceneImagesList.length > 0) {
					item.sceneImagesList.forEach(m => {
						ids.push(m.id)
					})
				}
				item.sceneImageIds = ids.join(',')
			})
			const res = await transferRecordHttp.addRecord(ruleForm.value)
			console.log(res.data)
			if (res.data.code == 200) {
				dialogVisible.value = false
				todayCarListSearch()
				search()
				ElMessage({
					message: "新增成功",
					type: "success",
				});
			} else {
				ElMessage({
					message: res.data.msg,
					type: "error",
				});
			}
		} else if (dialogType.value == 'edit') {
			ruleForm.value.loadingDetailList.forEach(item => {
				let ids = []
				if (item.sceneImagesList.length > 0) {
					item.sceneImagesList.forEach(m => {
						ids.push(m.id)
					})
				}
				item.sceneImageIds = ids.join(',')
			})
			ruleForm.value.licensePlate = ruleForm.value.loadingDetailList[0].licensePlate
			ruleForm.value.transportDepName = ruleForm.value.loadingDetailList[0].transportDepName
			ruleForm.value.vehicleType = ruleForm.value.loadingDetailList[0].vehicleType
			ruleForm.value.emptyWeight = ruleForm.value.loadingDetailList[0].emptyWeight
			ruleForm.value.driver = ruleForm.value.loadingDetailList[0].driver
			ruleForm.value.phone = ruleForm.value.loadingDetailList[0].phone
			ruleForm.value.transferQuantity = ruleForm.value.loadingDetailList[0].transferQuantity
			ruleForm.value.loadingEquipment = ruleForm.value.loadingDetailList[0].loadingEquipment
			ruleForm.value.loadingLocation = ruleForm.value.loadingDetailList[0].loadingLocation
			ruleForm.value.entranceTime = ruleForm.value.loadingDetailList[0].entranceTime
			ruleForm.value.loadingTime = moment(ruleForm.value.loadingDetailList[0].loadingTime).format(
				'YYYY-MM-DD HH:mm')
			ruleForm.value.loadingException = ruleForm.value.loadingDetailList[0].loadingException
			const res = await transferRecordHttp.updateRecord(ruleForm.value)
			console.log(ruleForm.value, '222222')
			if (res.data.code == 200) {
				dialogVisible.value = false
				todayCarListSearch()
				search()
				ElMessage({
					message: "编辑成功",
					type: "success",
				});
			} else {
				dialogVisible.value = false
				ElMessage({
					message: res.data.msg,
					type: "error",
				});
			}
		}
	}

	const getFileInfoByIdToUrl = async (id, type) => {
		if (!id) return
		let url = ''
		const {
			data
		} = await fileInfoHttp.fileInfoGetById(id)
		if (data.code == 200) {
			if (type == 'fullLoadImageIds') {
				url = data.data.url
			}
			if (type == 'emptyLoadImageIds') {
				url = data.data.url
			}
			if (type == 'unloadImageIds') {
				url = data.data.url
			}
			if (type == 'receiveTriplicateForm') {
				url = data.data.url
			}
		}
		return url
	}
	const getFileInfoById = async (id, type) => {
		const {
			data
		} = await fileInfoHttp.fileInfoGetById(id)
		if (data.code == 200) {
			if (type == 'sceneImageIds') {
				sceneImagesList.value[0] = data.data
			}
			if (type == 'receiveImageIds') {
				receiveImageList.value[0] = data.data
			}
			if (type == 'enterImageIds') {
				ruleForm.value.loadingDetailList[0].enterImageIds = data.data.url
			}
			if (type == 'exitWeighImageIds') {
				ruleForm.value.loadingDetailList[0].exitWeighImageIds = data.data.url
			}
			if (type == 'exitTriplicateForm') {
				ruleForm.value.loadingDetailList[0].exitTriplicateForm = data.data.url
			}
			if (type == 'samplingImageId') {
				ruleForm.value.loadingDetailList[0].samplingImageId = data.data.url
			}
			if (type == 'fullLoadImageIds') {
				ruleForm.value.fullLoadImageIdsUrl = data.data.url
			}
			if (type == 'emptyLoadImageIds') {
				ruleForm.value.emptyLoadImageIdsUrl = data.data.url
			}
			if (type == 'unloadImageIds') {
				ruleForm.value.unloadImageIdsUrl = data.data.url
			}
			if (type == 'receiveTriplicateForm') {
				ruleForm.value.receiveTriplicateFormUrl = data.data.url
			}
		}
	}
	const uploadFileList = async (params, type) => {
		const res = await fileInfoHttp.fileInfoUpload(params)
		console.log(res.data)
		if (res.data.code == 200) {
			ruleForm.value[type] = res.data.data.id
		}
	}
	const itemUploadFileList = async (params, type, index) => {
		console.log(ruleForm.value.loadingDetailList[0], 111111)
		const res = await fileInfoHttp.fileInfoUpload(params)
		// console.log(res.data)
		if (res.data.code == 200) {
			ruleForm.value.loadingDetailList[index].sceneImagesList.pop()
			ruleForm.value.loadingDetailList[index].sceneImagesList.push(res.data.data)
		}
	}

	// 现场图片文件
	const sceneImagesList = ref([])
	const handleRemoveSceneImageIds = (uploadFile, uploadFiles) => {
		console.log(ruleForm.value.loadingDetailList, '1111111')
	}
	const handleSuccessSceneImageIds = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles, '2222222')
	}
	// 接受图片文件
	const receiveImageList = ref([])
	const handleRemoveReceiveImageIds = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles, '1111111')
		sceneImagesList.value = []
		ruleForm.sceneImageIds = ''
	}
	const handleSuccessReceiveImageIds = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles, '2222222')
	}
	const dialogImageVisible = ref(false)
	const dialogImageUrl = ref('')
	const handlePictureCardPreview = (uploadFile) => {
		dialogImageUrl.value = uploadFile.url
		dialogImageVisible.value = true
	}
	const options = ref({
		penColor: 'rgb(10, 10, 10)', // 画笔颜色
		backgroundColor: 'rgba(0, 0, 0, 0.1)', // 背景颜色
		penWidth: 2 // 画笔宽度
	})
	const signaturePad = ref()
	const dialogLeaveVisible = ref(false)
	const ruleFormLeave = ref({
		id: '',
		moistureContent: '',
		samplingImageId: ''
	})
	const handleLeave = (index, row) => {
		dialogLeaveVisible.value = true
		ruleFormLeave.value.id = row.id
		ruleFormLeave.value.moistureContent = ''
		ruleFormLeave.value.samplingImageId = ''
		nextTick(() => {
			signaturePad.value.resizeCanvas()
		})
	}
	const clearSignature = () => {
		signaturePad.value.clearSignature()
	}
	const allowloadingMud = async (index, row) => {
		const res = await transferRecordHttp.loadingVerify({
			id: row.id
		})
		if (res.data.code == 200) {
			todayCarListSearch()
			search()
			ElMessage({
				message: "确认成功",
				type: "success",
			});
		}

	}
	const sampling = async (index, row) => {
		ruleFormLeave.value.id = row.id
		const res = await transferRecordHttp.reportContainsWater(ruleFormLeave.value)
		if (res.data.code == 200) {
			todayCarListSearch()
			search()
			ElMessage({
				message: "提交成功",
				type: "success",
			});
		}
	}
	const base64ToFile = (base64Data, fileName = 'signature.png') => {
		const arr = base64Data.split(',');
		const mime = arr[0].match(/:(.*?);/)[1];
		const bstr = atob(arr[1]);
		let n = bstr.length;
		const u8arr = new Uint8Array(n);

		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}

		return new File([u8arr], fileName, {
			type: mime
		});
	};
	const base64DataUrl = ref('')
	const leaveConfirm = async () => {
		const {
			isEmpty,
			data
		} = signaturePad.value.saveSignature()

		// 2. 转换为 File 对象
		const file = base64ToFile(data, `${uuidv4()}.png`);

		// 2. 将 Base64 转换为 Blob 对象
		// const blob = new Blob([base64Data], { type: 'image/png' });

		console.log(data, file, 'file')
		// 3. 创建 FormData 并附加文件
		const formData = new FormData();
		formData.append('file', file); // 第三个参数是文件名
		const res = await fileInfoHttp.fileInfoUpload(formData)
		ruleFormLeave.value.samplingImageId = res.data.data.id
		const res2 = await transferRecordHttp.reportContainsWater(ruleFormLeave.value)
		if (res2.data.code == 200) {
			todayCarListSearch()
			search()
			dialogLeaveVisible.value = false
			ElMessage({
				message: "提交成功",
				type: "success",
			});
		}
	}

	const mapContainerRef = ref()
	const endMarkerInfo = ref(null)
	const AMapInfo = ref(null)
	const snapshotUrl = ref(null)
	const logistics = ref([])
	let map = null;
	// 配置地图
	window._AMapSecurityConfig = {
		securityJsCode: 'df3f539c98440733289e8740c0440834'
	}
	const dialogMapInfo = ref({})
	const dialogMapVisible = ref(false)
	const handleMap = async (index, row) => {
		const {
			data
		} = await transferRecordHttp.queryPoint(row.id)
		grasproad(data.data, row)
	}

	const confirmMapDriving = () => {
		mapContainerRef.value.captureScreenshot()
	}
	const closeConfirmMapDriving = () => {
		dialogMapVisible.value = false
		search()
	}

	const makeRequest = async (options) => {
		try {
			const response = await axios({
				method: options.method,
				url: options.url,
				data: options.data,
				headers: {
					'Content-Type': 'application/json'
					// 添加其他需要的headers
				}
			});

			if (options.success) {
				options.success(response.data);
			}

			return response.data;
		} catch (error) {
			if (options.fail) {
				options.fail(error);
			}
			throw error;
		}
	};

	const getDistance = (arrs) => { // 经纬度数据算距离
		let distance = 0
		let sum = 0
		const l = arrs.length

		function Rad(d) {
			return d * Math.PI / 180.0
		}
		for (let i = 0, le = l - 1; i < le; i++) {
			const radLat1 = Rad(arrs[i]['latitude'])
			const radLat2 = Rad(arrs[i + 1]['latitude'])
			const lats = radLat1 - radLat2
			const lngs = Rad(arrs[i]['longitude']) - Rad(arrs[i + 1]['longitude'])
			const s = [2 * Math.asin(Math.sqrt(Math.pow(Math.sin(lats / 2), 2) + Math.cos(radLat1) * Math.cos(
				radLat2) * Math.pow(Math.sin(lngs / 2), 2)))] * 6378.137
			sum = sum + s
		}
		distance = sum.toFixed(2)
		return distance
	}

	//轨迹纠偏
	const grasproad = (data, row) => {
		let startTime = data[0] ? moment(data[0].createTime) : ''
		let params = []
		if (data.length > 500) {
			data.forEach((item, index) => {
				let preTime = 0
				if (index > 1) {
					preTime = moment(data[index - 1].createTime)
				}
				let endTime = moment(item.createTime)
				if (endTime.diff(preTime, 'seconds') > 10 && item.speed != 0) {
					if (item.speed > 20) {
						//console.log(item.speed);
					}
					let obj = {
						x: item.longitude,
						y: item.latitude,
						ag: 0,
						sp: item.speed || 0,
						tm: endTime.diff(startTime, 'seconds')
					}
					params.push(obj)
				}
			})
		} else {
			data.forEach((item, index) => {
				let preTime = 0
				if (index > 1) {
					preTime = moment(data[index - 1].createTime)
				}
				let endTime = moment(item.createTime)
				if (endTime.diff(preTime, 'seconds') > 6) {
					let obj = {
						x: item.longitude,
						y: item.latitude,
						ag: 0,
						sp: item.speed || 60,
						tm: endTime.diff(startTime, 'seconds')
					}
					params.push(obj)
				}
			})
		}
		if (params.length > 500) {
			let list = []
			params.forEach((item, index) => {
				if (index % 2 != 0) {
					list.push(item)
				}
			})
			params = JSON.parse(JSON.stringify(list))
		}
		const toDelete = new Set(); // 存储需要删除的索引
		// 遍历检测相邻点距离
		for (let i = 0; i < params.length - 1; i++) {
			const p1 = params[i];
			const p2 = params[i + 1];

			let obj1 = {
				longitude: params[i].x,
				latitude: params[i].y
			}
			let obj2 = {
				longitude: params[i + 1].x,
				latitude: params[i + 1].y
			}
			const distance = getDistance([obj1, obj2]); // 注意：y是纬度，x是经度
			if (distance > 5) { // 距离超过5公里
				toDelete.add(i);
				toDelete.add(i + 1);
			}
		}

		params = params.filter((_, index) => !toDelete.has(index));
		
		// 高德地图地理编码API的URL模板
		const geocodingUrl = `https://restapi.amap.com/v4/grasproad/driving?key=ec2f2cf74c09f712cf76fc497bd61e6b`;
		//发送HTTP请求
		let that = this
		makeRequest({
			method: 'POST',
			url: geocodingUrl,
			data: params,
			success: (res) => {
				if (res.data && res.data.points) {
					let points = res.data.points
					logistics.value = []
					points.forEach(item => {
						let obj = {
							latitude: item.y,
							longitude: item.x
						}
						logistics.value.push(obj)

					})
					if (logistics.value.length > 0) {
						dialogMapInfo.value = row
						dialogMapVisible.value = true
						if (!dialogMapInfo.value.travelDistance) {
							dialogMapInfo.value.travelDistance = getDistance(data.data)
						}
					} else {
						ElMessage({
							type: 'warning',
							message: '暂无轨迹数据'
						})
					}
				} else {
					logistics.value = data
					if (logistics.value.length > 0) {
						dialogMapInfo.value = row
						dialogMapVisible.value = true
						if (!dialogMapInfo.value.travelDistance) {
							dialogMapInfo.value.travelDistance = getDistance(data.data)
						}
					} else {
						ElMessage({
							type: 'warning',
							message: '暂无轨迹数据'
						})
					}
				}

			},
			fail: (err) => {
				logistics.value = data
				if (logistics.value.length > 0) {
					dialogMapInfo.value = row
					dialogMapVisible.value = true
					if (!dialogMapInfo.value.travelDistance) {
						dialogMapInfo.value.travelDistance = getDistance(data.data)
						console.log('data.data', data.data);
					}
				} else {
					ElMessage({
						type: 'warning',
						message: '暂无轨迹数据'
					})
				}

			}
		})

	}

	let timer = null
	onMounted(() => {
		todayCarListSearch()
		search()
		timer = setInterval(() => {
			search()
		}, 10000)
		getTransshipmentDestination() // 转运目的地
		searchlicenseNoList() // 转运目的地

	})
	onUnmounted(() => {
		clearInterval(timer);
	})
</script>

<style scoped lang="less">
	.chartInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20px;

		.cut {
			width: 20px;
		}

		.itembox {
			background: #fff;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 16px 0;
			position: relative;

			.itemboxTitle {
				font-size: 18px;
				font-weight: bold;
				position: absolute;
				left: 0;
				top: 20px;
				line-height: 32px;
				padding-left: 10px;
				border-left: 3px solid #38acf5;
			}
		}

		.chart {
			width: 100%;

			.timeChange {
				display: flex;
				justify-content: center;
				margin-top: 4px;
				margin-bottom: 10px;
				width: 100%;

				.filter {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.seachFilter {
						width: 100%;
						margin-top: 10px;
						display: flex;
						flex-direction: row;
						justify-content: left;
					}

					.flexWarp {
						flex-wrap: wrap;
					}
				}
			}

			.unit {
				position: absolute;
				top: 20px;
				right: 20px;
				line-height: 32px;
				color: #666;
				font-size: 16px;
			}

			.scrollbar-flex-content {
				display: flex;
				justify-content: left;
			}

			.scrollbar-demo-item {
				flex-shrink: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin: 10px;
				text-align: center;
				border-right: 1px solid #ddd;
				padding-right: 32px;
				position: relative;

				&.last {
					border-right: none;
				}

				img {
					width: 80px;
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 10px;

					p {
						color: #666;
						line-height: 24px;
						font-size: 12px;
						text-align: left;
					}
				}

				.checked {
					position: absolute;
					right: 4px;
					top: -10px;
				}
			}
		}
	}

	.filter {
		display: flex;
		flex-direction: row;
		justify-content: left;

		.filter-item {
			margin: 0 0px 10px 10px;
		}
	}

	.headerCellStyle {
		background: #38acf5;
	}

	.dialogContent {
		width: 960px;

		.sludgemodel {

			// margin-bottom: 10px;
			.modelTitle {
				font-size: 16px;
				line-height: 18px;
				padding-left: 10px;
				border-left: 3px solid #38acf5;
				margin-bottom: 10px;
				font-weight: 500;

				.addCar {
					margin-left: 10px;
				}
			}
		}

		.carInfo {
			.carItem {
				padding: 0 14px;

				.carItemName {
					font-size: 14px;
					color: #666;
					line-height: 24px;
					border-bottom: 1px solid #eee;
					margin-bottom: 10px;
					position: relative;

					.deleteCar {
						position: absolute;
						right: 0;
						top: 2px;
						width: 14px;
						height: 18px;
						font-size: 10px;
					}
				}
			}
		}

		.hiddenAddPic {
			:deep(.el-upload--picture-card) {
				display: none;
			}
		}
	}

	.demo-ruleForm-item {
		margin-right: 0 !important;
	}

	.equipmentPagination {
		justify-content: right;
		margin-top: 10px;
	}

	.fullPriview {
		margin: 0 auto;
		width: 100%;
	}

	.pictureList {
		display: flex;
		flex-direction: row;
		justify-content: left;

		.pictureItem {
			width: 120px;
			margin-right: 20px;

			.pic {
				width: 100px;
				height: 100px;
				font-size: 0;
				border-radius: 6px;
				overflow: hidden;
				margin: 0 auto;
			}

			.picName {
				text-align: center;
			}

			.image-slot {
				font-size: 12px;
				color: #999;
				text-align: center;
				line-height: 100px;
				border: 1px dashed #ccc;
				width: 98px;
				height: 98px;
				box-sizing: border-box;
				border-radius: 6px;
			}
		}
	}

	.carListPosi {
		position: relative;

		.leave {
			margin: 0 !important;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 70px !important;
			height: 70px;
		}
	}

	#map-container {
		height: 450px;
		background-color: var(--cp-bg);
		overflow: hidden;
		position: relative;

		.title {
			background-color: #fff;
			height: 46px;
			width: 355px;
			border-radius: 4px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			font-size: 16px;
			position: absolute;
			left: 10px;
			top: 10px;
			box-sizing: border-box;
			box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
			z-index: 999;

			>span {
				flex: 1;
				text-align: center;
			}

			.van-icon {
				font-size: 18px;
				color: #666;

				&:last-child {
					color: var(--cp-primary);
				}
			}
		}

		.current {
			height: 80px;
			border-radius: 4px;
			background-color: #fff;
			height: 80px;
			width: 355px;
			box-sizing: border-box;
			padding: 15px;
			position: absolute;
			left: 10px;
			bottom: 10px;
			box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
			z-index: 999;

			.status {
				font-size: 15px;
				line-height: 26px;
			}

			.predict {
				color: var(--cp-tip);
				font-size: 13px;
				margin-top: 5px;

				>span {
					padding-right: 10px;
				}
			}
		}

		.screentShotAll {
			position: absolute;
			top: 10px;
			right: 90px;
			z-index: 2000;
		}

		.screentShotEnd {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 2000;
		}
	}

	.mapInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.mapInfoItem {
			margin-bottom: 16px;
		}
	}
</style>